import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'
import "./datil.css"

@inject("datil")
@observer

export default class datil extends Component<any, any> {
    back: any
    componentDidMount() {
        this.props.datil.getDetailRecom(this.props.match.params.id)


    }
    render() {
        const { detailRecom,detailList } = this.props.datil
        console.log(detailRecom);

        return (
            <div className="recommend-datil">


                <div className="datil-top" >
                    <div className="headers">
                        <div className="back" onClick={()=>{this.backs()}}><i className="fa fa-arrow-left" aria-hidden="true"></i></div>
                        <h1>歌单</h1>
                    </div>
                    <div className="bg">
                        <img src={detailRecom.coverImgUrl} alt="" />
                    </div>
                    <div className="header-top">
                        <div className="left">
                            <img src={detailRecom.coverImgUrl} alt="" />
                        </div>
                        <div className="title">
                            {detailRecom.name}
                        </div>
                    </div >
                    <div className="navs">
                        <div>
                            <i className="fa fa-commenting-o" aria-hidden="true"></i><span>评论</span>
                        </div>
                        <div>
                            <i className="fa fa-heart-o" aria-hidden="true"></i><span>点赞</span>
                        </div>
                        <div>
                            <i className="fa fa-plus" aria-hidden="true"></i><span>收藏</span>
                        </div>
                        <div>
                            <i className="fa fa-ellipsis-v" aria-hidden="true"></i><span>更多</span>
                        </div>
                    </div>

                </div>
                <div className="datail-list">
                        {
                            detailList.map((item:any,index:number)=>{
                            return  <div key={index}><span>{index+1}</span><li>{item.name}</li></div>
                            })
                        }
                </div>

            </div>
        )
    }
    backs(){
        this.props.history.go(-1)
    }
}
